<template>
    <div class="person">
        <img :src="avatar" alt="" width="100px">
        <span>{{name}}</span>
    </div>
</template>

<script>
export default {
    props: {
        avatar: {//声明属性，指定头像
            type: String,
            default: ''
        },
        name:{//指定昵称
            type: String,
            default: '默认昵称',
        }
    },
}
</script>

<style lang="scss" scoped>
.person {
    margin: 5px;
    display: inline-block;
    width: 110px;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: center;

    >img {
        width: 100px;
    }

    >span {
        display: block;
        width: 110px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
</style>